<template>
  <view class="uni-comment-item relative">
    <!-- 信息 -->
    <view class="info box">
      <view class="uni-avatar mr-10">
        <image :src="item.avatar || defaultImage" />
      </view>
      <view>
        <view class="name fz-15 bold">{{item.name}}</view>
        <view class="date fz-12 cl-second mt-5">{{item.comment_at || item.created_at}}</view>
      </view>
    </view>

    <!-- 内容 -->
    <view class="content pl-35 mt-5" style="overflow: auto;" v-html="item.desc || item.comment_desc"></view>

    <!-- 右上角插槽 -->
    <view class="top-right">
      <slot name="topRight"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniCommentItem",

  props: {
    item: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      defaultImage: this.$config.default
    };
  }
};
</script>

<style lang="scss" scoped>
.uni-comment-item {
  padding: 20upx 0;

  .top-right {
    position: absolute;
    top: 20upx;
    right: 0;
  }
}
</style>
